<template>
	<view class="body">
		<CommonHeader title="绑定" showTitle="true"/>
		<view class="content">
			<view class="search">
				<image class="scan" src="@/static/binding/scan.png" mode="aspectFit"/>
				<input class="dn" type="text" placeholder="点击扫描或者输入DN" />
				<view class="line"></view>
				<view class="banding">绑定</view>
			</view>

			<view class="menu">
				<view class="menu-list active">待提交</view>
				<view class="menu-list">拨号状态</view>
				<view class="menu-list">压测状态</view>
				<view class="menu-list">部署状态</view>
			</view>

			<view class="list">
				<view class="list-item" v-for="(item, index) in 11" :key="index">
					<view class="left">
						<view class="dn">
							<view class="dn-text">DN：SSSSSSSSSSSSSSSSS</view>
							<image class="icon" src="@/static/node/copy.png" mode="aspectFit"/>
						</view>
						<view class="status">
							<view class="status-text">设备状态</view>
							<view class="status-value blue">待提交</view>

							<view class="status-text">管理线</view>
							<view class="status-value manage red">离线</view>
						</view>
						<view class="remark">
							<view class="remark-text">备注：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</view>
							<image class="icon" src="@/static/node/remark.png" mode="aspectFit"/>
						</view>
					</view>
					<view class="right">
						<view class="line"></view>
						<view class="btn">去提交</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import CommonHeader from '@/components/CommonHeader.vue'
import { onLoad,onShow } from '@dcloudio/uni-app'
import { checkLogin } from '@/utils/auth'
import { showToast } from '@/utils/auth';


onLoad(() => {
    //登录验证
    checkLogin()
})
onShow(() => {
  // 触发数据变化或强制刷新
})

</script>

<style lang="scss">
	.body {
		height: 100vh;
		background-color: #F8F8F8;
		position: relative;
	}

	.content {
		position: absolute;
		width: 750rpx;
		top: 180rpx;
		left: 0;
		background-color: #F8F8F8;
		
		.search {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 15rpx;
			margin: 25rpx 44rpx;
			border: 1px solid #8E8E8E;
			background-color: #FFFFFF;
			padding: 15rpx 035rpx 15rpx 26rpx;
			.scan {
				width: 44.27rpx;
				height: 44.27rpx;
			}
			.dn {
				flex: 1;
				font-size: 28rpx;
				color: #333333;
				border: none;
				outline: none;
				padding: 0 17rpx;
			}
			.line {
				height: 36.98rpx;
				border:1rpx solid #8E8E8E;
				margin-right: 26rpx;
			}
			.banding {
				background-color: #fff;
				color: #2E91FF;
				font-size: 33rpx;
				font-weight: bold;
			}
		}
		.menu {
			display: flex;
			justify-content: space-around;
			background-color: #FFFFFF;
			border-radius: 15rpx 15rpx 0 0;
			padding: 0 20rpx;
			border-bottom: 1px solid #8E8E8E;
			.menu-list {
				flex: 1;
				text-align: center;
				padding: 20rpx 0;
				margin: 0 20rpx;
				font-size: 30rpx;
				color: #8E8E8E;
				border-bottom: 3px solid transparent;
				&.active {
					border-bottom-color: #288EFF;
					border-bottom-width: 2px;
					color: #332C2B;
				}
			}
		}

		.list {
			padding: 15rpx 17rpx;
			height: calc(100vh - 400rpx);
			overflow-y: scroll;
			.list-item {
				background-color: #FFFFFF;
				border-radius: 15rpx;
				padding: 25rpx;
				display: flex;
				justify-content: space-between;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09);
				margin-bottom: 20rpx;

				.left {
					.dn {
						display: flex;
						align-items: center;
						font-size: 25rpx;
						color: #2C2C2C;
						margin-bottom: 9rpx;
						padding-right: 10rpx;
						.dn-text {
							width: 457.29rpx;
							white-space: nowrap; /* 防止文本换行 */
							overflow: hidden; /* 隐藏溢出的文本 */
							text-overflow: ellipsis; /* 显示省略号 */
						}
						.icon {
							width: 28.13rpx;
							height: 28.13rpx;
							padding-left: 10rpx;
						}
					}
					.status {
						display: flex;
						align-items: center;
						font-size: 25rpx;
						color: #332C2B;
						margin-bottom: 11rpx;
						.status-text {
							padding-right: 6rpx;
							
						}
						.status-value {
							color: #fff;
							padding: 4rpx 10rpx;
							border-radius: 25rpx;
							margin-right: 30rpx;
						}
						.blue{
							background-color: #4799F0;
						}
						.green{
							background-color: #22AC38;
						}
						.red {
							background-color: #E5695F;
						}
					}
					.remark {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #909090;
						.remark-text {
							width: 457.29rpx;
							white-space: nowrap; /* 防止文本换行 */
							overflow: hidden; /* 隐藏溢出的文本 */
							text-overflow: ellipsis; /* 显示省略号 */
						}
						.icon {
							width: 28.13rpx;
							height: 27.08rpx;
							padding-left: 10rpx;

						}
					}
				}

				.right {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.line {
						width: 1px;
						height: 56.61rpx;
						background-color: #2C2C2C;
					}
					.btn {
						color: #2980FF;
						font-size: 25rpx;
						padding: 10rpx 20rpx;
						text-align: center;
					}
				}
			}
		}

	}
</style>
